<template>
  <div>
    <div class="list">
      <div class="title">自助服务</div>
      <div class="items">
        <div v-for="item in doServerList" :key="item.title" class="item">
          <img class="img" :src="getDynamicImage(item.img)" />
          <div class="left">
            <div class="title1">{{ item.title }}</div>
            <div class="info">{{ item.info }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="title">数据服务</div>
      <div class="items">
        <div v-for="item in dataServerList" :key="item.title" class="item">
          <img class="img" :src="getDynamicImage(item.img)" />
          <div class="left">
            <div class="title1">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="title">用户服务</div>
      <div class="items">
        <div v-for="item in userServerList" :key="item.title" class="item">
          <img class="img" :src="getDynamicImage(item.img)" />
          <div class="left">
            <div class="title1">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
const getDynamicImage = name => {
  return new URL(`/src/assets/images/${name}`, import.meta.url).href;
};
const doServerList = [
  { title: "帮助文档", img: "doServer1.png", info: "全面的产品指南助您轻松上云", link: "" },
  { title: "工单服务", img: "doServer2.png", info: "为您提供技术工单服务", link: "" },
  { title: "智能客服", img: "doServer3.png", info: "7*24为您答疑解惑", link: "" },
  { title: "技术社区", img: "doServer4.png", info: "各行高手帮您解决技术难题", link: "" }
];

const dataServerList = [
  { title: "数据申请", img: "dataServer1.png", info: "全面的产品指南助您轻松上云", link: "" },
  { title: "开放API申请", img: "dataServer1.png", info: "为您提供技术工单服务", link: "" }
];

const userServerList = [
  { title: "问题上报", img: "userServer1.png", info: "全面的产品指南助您轻松上云", link: "" },
  { title: "意见反馈", img: "userServer2.png", info: "为您提供技术工单服务", link: "" }
];
</script>
<style lang="scss" scoped>
.list {
  box-sizing: border-box;
  width: 1618px;
  height: 266px;
  padding: 20px 37px;
  margin: 30px auto;
  border: 1px solid #cccccc;
  border-radius: 10px;
  .title {
    margin-bottom: 46px;
    font-size: 18px;
    font-weight: 700;
    color: #2b67b0;
  }
  .items {
    display: flex;
  }
  .item {
    display: flex;
    align-content: center;
    width: 344px;
    height: 111px;
    cursor: pointer;
    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 25px;
      font-size: 16px;
      .title1 {
        margin-bottom: 14px;
        font-size: 16px;
        font-weight: 700;
        color: #242424;
      }
      .info {
        color: #3963a6;
      }
    }
  }
}
</style>
